<template>
  <div class="centerRight3">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span>
          <i class="iconfont icon-shuju7" />
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2" style="font-size:18px" @click=goToinpatientsDetailsView()>高危患者</span>
        </div>
      </div>
      <div class="d-flex mt-1 jc-center body-box">
        <dv-scroll-board class="dv-scr-board" :config="config" @click="(event) => handleRowClick(event)" />
      </div>
    </div>
  </div>
</template>


<script>
import { defineComponent, reactive } from "vue";
export default defineComponent({
  data() {
    return {
      config: {
        header: ["序号", "业务指标", "数量", "上周同期"],
        data: [], // 初始化为空数组，将通过接口获取
        rowNum: 4, // 表格行数
        headerHeight: 35,
        headerBGC: "#0f1325", // 表头背景色
        oddRowBGC: "#0f1325", // 奇数行背景色
        evenRowBGC: "#171c33", // 偶数行背景色
        index: false,
        columnWidth: [120, 120, 120, 120],
        align: ["center","center","center","center"],
      },
      refreshInterval: null, // 用于存储定时器
      refreshTime: 10*60*1000, // 刷新时间间隔，单位：毫秒（这里设置为30秒）
    };
  },
  methods: {
    // 获取数据的方法
    async fetchData() {
      try {
        // 调用接口获取数据，这里使用axios示例
        const response = await this.$axios.get( window.globalConfig.baseApi +"/api/Nurse/GetAllStatisticsDataJson?IDataType=2");
        const apiData = response.data;

        // 去掉多余的双引号，只保留span标签
        const convertedData = apiData.map((item) => [
          item.id,
          item.iiiDataType,
          "<span>" + item.number + "</span>", 
          "<span>" + item.lastWeekNum + "</span>", 
        ]);

        this.config = {
          ...this.config,
          data: convertedData,
        };

        // 可选：打印日志，方便调试
        console.log("数据更新成功", this.config.data);
      } catch (error) {
        console.error("获取数据失败:", error);
        // 可以在这里添加错误处理，如显示错误提示
      }
    },

    goToinpatientsDetailsView() {
      this.$router.push({ name: "FenYangGWBR" });
    },

    handleRowClick(event) {
      // 判断点击的是否为数据行（索引大于 0）
      if (event.rowIndex >= 0) {
        const itemId = event.row;
        this.$router.push({
          name: "ZBGLInfo",
          query: { secondColumnValues: itemId[1].toString() },
        });
      }
    },
  },
  created() {
    // 组件创建时立即获取一次数据
    this.fetchData();

    // 设置定时刷新
    this.refreshInterval = setInterval(() => {
      this.fetchData();
    }, this.refreshTime);
  },
  beforeUnmount() {
    // 组件销毁前清除定时器，防止内存泄漏
    if (this.refreshInterval) {
      clearInterval(this.refreshInterval);
      this.refreshInterval = null;
    }
  },
});
</script>

<style lang="scss" scoped>
$box-height: 100%;
$box-width: 100%;
.centerRight3 {
  margin-top:7px;
  padding: 16px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;
  .body-box {
    border-radius: 10px;
    overflow: hidden;
    .dv-scr-board {
      width:100%;
      height:300px;
    }
  }
}
</style>
